<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习 vue</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			我们学过的指令：
			v-bind ：单向绑定解析表达式，可简写为:XXX
			v-model ：双向数据绑定
			v-for：遍历数组/对象/字符串
			v-on：绑定事件监听，可简写为@
			v-if：条件渲染（动态控制节点是否存存在）
			v-else：条件渲染（动态控制节点是否存存在）
			v-show：条件渲染（动态控制节点是否展示）
			v-text指令：
				1.作用：向其所在的节点中渲染文本内容。
				2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
		 -->
		<!-- 创建容器 -->
		<div id="root">
			<div id="">{{name}}</div>
			<div id="" v-text="name">这部分内容无法显示，已经被v-text的内容代替了</div>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			
			//创建vue实例
			const vm=new Vue({
				el:'#root',
				data:{
					name:'上硅谷',
				}
			})
		</script>
	</body>
</html>
